<template>
	<div class="home-container">
		<div v-if="!user" class="header no-login">
			<div @click="$router.push('/login')" class="login-btn">
				<img class="mobile-img" src="@/assets/mobile.png">
				<span class="text">登录 / 注册</span>
			</div>
		</div>

		<div v-else class="header user-info">
			<div class="base-info">
				<div class="left">
					<van-image round fit="cover" class="avatar" :src="userInfo.photo" />
					<span class="name">{{userInfo.name}}</span>
				</div>
				<div class="right">
					<van-button to="/user" size="mini" round>编辑资料</van-button>
				</div>
			</div>
			<div class="data-stats">
				<div class="data-item">
					<span class="count">{{userInfo.art_count}}</span>
					<span class="text">头条</span>
				</div>
				<div class="data-item">
					<span class="count">{{userInfo.follow_count}}</span>
					<span class="text">关注</span>
				</div>
				<div class="data-item">
					<span class="count">{{userInfo.fans_count}}</span>
					<span class="text">粉丝</span>
				</div>
				<div class="data-item">
					<span class="count">{{userInfo.like_count}}</span>
					<span class="text">获赞</span>
				</div>
			</div>
		</div>

		<van-grid clickable class="grid-nav" :column-num="2">
			<van-grid-item class="grid-item">
				<template #icon>
					<i class="iconfont icon-shoucang"></i>
				</template>
				<template #text>
					<span class="text">收藏</span>
				</template>
			</van-grid-item>
			<van-grid-item class="grid-item">
				<template #icon>
					<i class="iconfont icon-lishi"></i>
				</template>
				<template #text>
					<span class="text">历史</span>
				</template>
			</van-grid-item>
		</van-grid>

		<van-cell title="小思同学" is-link to="/chat"/>
		<van-cell @click="onLogout" title="退出登录" v-if="user" class="logout-cell" clickable />

	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		getUserInfo
	} from '@/api/user'

	export default {
		data() {
			return {
				userInfo: {},
			}
		},

		created() {
			if (this.user) {
				this.loadUserInfo()
			}
		},

		computed: {
			...mapState(['user'])
		},

		methods: {
			onLogout() {
				this.$dialog.confirm({
						title: '是否退出登录',
					})
					.then(() => {
						this.$store.commit('setUser', null)
					})
			},

			async loadUserInfo() {
				try {
					const {
						data: res
					} = await getUserInfo()
					this.userInfo = res.data
					this.$store.commit('setUserPhoto', this.userInfo.photo)
				} catch (e) {
					this.$toast('获取数据失败，请稍后重试')
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.home-container {
		.header {
			height: 361px;
			background: url(@/assets/banner.png);
			background-size: cover;
		}

		.no-login {
			display: flex;
			justify-content: center;
			align-items: center;

			.login-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.mobile-img {
					width: 132px;
					height: 132px;
					margin-bottom: 15px;
				}

				.text {
					font-size: 28px;
					color: #fff;
				}
			}
		}

		.user-info {
			.base-info {
				height: 231px;
				padding: 76px 32px 23px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					.avatar {
						width: 132px;
						height: 132px;
						margin-right: 23px;
						border: 4px solid #fff;
					}

					.name {
						font-size: 30px;
						color: #fff;
					}
				}
			}

			.data-stats {
				display: flex;

				.data-item {
					height: 130px;
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					color: #fff;

					.count {
						font-size: 36px;
					}

					.text {
						font-size: 23px;
					}
				}
			}
		}

		.grid-nav {
			.grid-item {
				height: 141px;

				i.iconfont {
					font-size: 45px;
				}

				.icon-shoucang {
					color: #eb5253;
				}

				.icon-lishi {
					color: #ff9d1d;
				}

				span.text {
					font-size: 28px;
				}
			}
		}

		.logout-cell span {
			display: flex;
			justify-content: center;
			color: #ff0066;
		}

	}
</style>
